<template>
  <view class="list-item">
    <view class="top">
      <view class="time">{{ product.create_time }}</view>
      <view class="status">{{ statusMap[product.status] || '--' }}</view>
    </view>
    <view class="content">
      <view class="image-container">
        <image :src="product.image" mode="" alt="Product Image" />
      </view>
      <view class="details">
        <view class="title ss-line-1">{{ product.title }}</view>
        <view class="category">{{ product.category }}</view>
        <view class="price">¥ {{ product.price }}</view>
      </view>
    </view>
    <view class="actions">
      <!-- <view class="action-item" v-if="product.status === 'success' || product.status === 'failure'" @tap="handleDelete(product.id)">删除</view> -->
      <view class="action-item" v-if="product.status === 'success'" @tap="handleUnbind(product)">解除货源关联</view>
      <view class="action-item" v-if="product.status === 'success'" @tap="viewGoods">查看货源</view>
    </view>
  </view>
</template>

<script setup>
  import { ref, reactive, computed } from 'vue'
  import sheep from '@/sheep';
  const emit = defineEmits(['action'])

  const userInfo = computed(() => sheep.$store('user').userInfo);

  const statusMap = {
		'success': '在售',
		'error': '铺货失败',
		'loss': '货源已失效'
	}

  const props = defineProps({
    product: {
      type: Object,
      required: true
    }
  })

  const viewGoods = () => {
    console.log(props.product, 'product')
    sheep.$router.go('/pages/distribution/detail', { id: props.product.goods_id })
  }

  const handleDelete = (id) => {
    console.log('删除', id);
    emit('action', 'delete', props.product.id)
  }
  
  const handleUnbind = (item) => {
    // console.log('解除货源关联', id);
    emit('actionUnbind', item)
  }

  
</script>

<style scoped lang="scss">
view {
  font-family: Source Han Sans;
}
.list-item {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
  margin: 16rpx 20rpx;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .time {
      font-size: 24rpx;
      color: #9E9E9E;
    }
    .status {
      font-size: 24rpx;
      color: #202020;
      font-weight: 700;
    }
  }
  .content {
    display: flex;
    margin-top: 18rpx;
  }
  .image-container {
    width: 150rpx;
    height: 150rpx;
    min-height: 150rpx;
    border-radius: 10rpx;
    background-color: #D8D8D8;
    margin-right: 20rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    & > view {
      flex: 0 1 auto;
    }
    .title {
      font-size: 30rpx;
      color: #000000;
      font-weight: 500;
    }
    .category {
      font-size: 24rpx;
      color: #9E9E9E;
    }
    .price {
      font-size: 30rpx;
      color: #FF0000;
      font-weight: 700;
    }
  }
  .actions {
    display: flex;
    justify-content: flex-end;
    .action-item {
      padding: 10rpx 16rpx;
      font-size: 24rpx;
      color: #202020;
      margin-left: 10rpx;
      border: 1rpx solid #C2C2C2;
      border-radius: 10rpx;
    }
  }
}

</style>